<template>
	<div class="test">
		<h1>{{ msg }}</h1>
		<h2 v-html="message"></h2>
		<label for="r1">修改颜色</label><input type="checkbox" v-model="flag" id="r1">
		<div v-bind:class="{'class1': flag}">测试</div>

		{{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }}
		<div v-bind:id="'list-' + id">菜鸟教程</div>

		<p v-if="seen">现在你看到我了</p>
		<a v-bind:href="url" target="_blank">菜鸟教程</a>

		<p>{{ text }}</p>
		<input v-model="text"><br>
		<button v-on:click="reverseMessage">反转字符串</button>

		<h3>{{ message | capitalize(1) }}</h3>
		<div>
			<a :href="url" target="_blank">百度一下</a>
		</div>
		<button @click="dosomething">点击{{ id }}</button>

	</div>
</template>

<script>
	export default {
		name: 'test',
		data() {
			return {
				msg: '欢迎来到菜鸟教程！111222333444',
				message: 'hello world',
				flag: true,
				ok: false,
				id: 2,
				seen: true,
				url: 'https://www.baidu.com',
				text: ''
			}
		},
		methods: {
			reverseMessage: function() {
				this.message = this.message.split('').reverse().join('')
			},
			dosomething: function() {
				this.id += 1
				console.log(this.id)
			}
		},
		filters: {
			capitalize: function(value, index) {
				if(!value) return ''
				value = value.toString()
				return value.slice(0, index) + value.charAt(index).toUpperCase() + value.slice(index + 1)
			}
		}
	}
</script>